<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.js"></script>
  <style>
    .box{
      width:100px;
      height:100px;
      background: rgb(34, 177, 34);
      position: fixed;
      right:10px;
      bottom:50px;
    }
  </style>
</head>

<body style="height:3000px">
  <div id="app">
    <div class="box" v-scroll="50"></div>
  </div>
  <script>
    Vue.directive("scroll",{
      inserted(el,binding){
        // console.log(el);
        // console.log(binding);
        el.style.display="none";
        // 添加滚动事件
        window.onscroll = function(){
          // 滚动距离
          var oTop = document.documentElement.scrollTop||document.body.scrollTop;
          console.log(oTop);
          if( oTop > binding.value  ){
            el.style.display="block";
          }else{
            el.style.display="none";
          }
        }
      },
      unbind(){
         window.onscroll = null; 
      }
    })
    new Vue({
      el: "#app"
    })
  </script>
</body>

</html>